<template>
  <div class="selectBridge">
    <vx-popup
      title="桥梁选择"
      width="600px"
      @close="handleClose"
      :active.sync="visible"
      @confirmPopup="handleOkSubmit"
      @cancelPopup="handleCancelSubmit"
    >
      <div class="content">
        <div class="content-right" v-if="bridgeList.length > 0">
          <!-- 区- 桥 -->
          <el-checkbox-group v-model="checkList" :max="8">
            <el-checkbox
              v-for="item in bridgeList"
              :label="item.deptResponses[0].code"
              :key="item.deptResponses[0].code"
              >{{ item.deptResponses[0].name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="content-right" v-if="bridgeList.length == 0">
          <!-- 区- 桥 -->
          <p class="tip">请选择省/市...</p>
        </div>
      </div>
    </vx-popup>
  </div>
</template>

<script>
import VuePerfectScrollbar from "vue-perfect-scrollbar";
export default {
  data() {
    return {
      visible: false,
      settings: {
        // perfectscrollbar settings
        maxScrollbarLength: 30,
        wheelSpeed: 1,
        swipeEasing: true
      },
      data: [],
      defaultProps: {
        children: "children",
        label: "simpleName",
        isLeaf: "leaf"
      },
      bridgeList: [],
      checkList: [],
      bridgeListDetail: []
    };
  },
  components: {},
  props: {},
  mounted() {
    this.bridgeList = JSON.parse(localStorage.getItem("viewData"));
  },
  methods: {
    init() {
      this.visible = true;
      this.bridgeListDetail = [];
      this.checkList = [];
    },
    handleClose() {
      this.visible = false;
    },
    handleOkSubmit() {
      this.visible = false;
      this.bridgeListDetail = [];
      let data = this.checkList;
      // console.log('123',data)
      let bridgeListDetail = [];
      //   this.$emit("getData", this.bridgeListDetail); viewData
      if (data.length > 0) {
        this.$api.mearsuringPointSetting.getBridgeAll().then((res) => {
          let birdgeListAll = res.data.data[0];
          data.map((item, key) => {
            birdgeListAll.map((i, k) => {
              if (item == i.id) {
                bridgeListDetail.push(i);
              }
            });
          });

          this.bridgeListDetail = bridgeListDetail;
          this.$emit("getData", this.bridgeListDetail);
        });
      } else {
        //   this.$emit
      }
    },
    handleCancelSubmit() {
      this.visible = false;
    }
  },
  watch: {}
};
</script>

<style lang="scss" scoped>
/deep/.el-tree {
  background: #f5f6fa !important;
  padding: 15px;
}
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #fff !important;
  height: 36px !important;
}
/deep/.el-tree-node__content {
  height: 36px !important;
}

/deep/.el-checkbox__label{
    line-height: 40px !important;
}

.content {
//   width: 800px;
  height: 340px;
  border: 1px solid #d9dce4;
  padding: 20px;
  .content-left {
    width: 220px;
    height: 438px;
    overflow: auto;
    // padding: 5px 10px;
    box-sizing: border-box;
    background: #f5f6fa;
  }
  .content-right {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
}
.carComparison-scroll {
  height: 440px;
  overflow: auto;
}

// 自定义滚动条样式
.content-left::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.content-left::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #bec4d0;
}
.content-left::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: transparent;
}

.content-right::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.content-right::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #bec4d0;
}
.content-right::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: transparent;
}
.line-content {
  padding: 15px 25px;
  box-sizing: border-box;
  width: 95%;
  border-bottom: 1px solid #d8dfed;
  .title {
    color: #327bdc;
    font-size: 14px;
    margin-bottom: 20px;
  }
}
.list-init {
  margin-bottom: 10px;
}
.tip {
  text-align: center;
  margin-top: 40%;
}
</style>
